<template>
  <div>
    <a-tabs v-model="activeKey" @change="onTabChange" style="background:#fff;margin-top:8px;border-radius:10px;">
      <a-tab-pane key="1" tab="操作权限">
        <a-tree v-model="checkedKeys" :tree-data="menu" checkStrictly :replaceFields="{ title: 'name', key: 'id', disabled:'disabled' }" checkable :default-checked-keys="defaultChecked" :selected-keys="checkedKeys" @check="getCheckedKeys" />
        <a-button type="primary" :disabled="isSave" style="margin-top:20px;margin-left:10px" @click="onSave" v-if="menu.length">保存</a-button>
      </a-tab-pane>
      <a-tab-pane key="2" tab="数据权限">
        <a-row style="width:480px;margin:0 auto;">
          <div style="margin:30px 0;">
            <span style="font-weight:bold;color:#333;display:block;font-size:16px;">数据权限</span>
            <span style="color:#333;display:block;">说明：（设置该角色的用户可以操作的数据的范围）</span>
          </div>
          <a-radio-group v-model="permissionsValue" @change="getPermissionsValue">
            <a-radio :style="radioStyle" v-for="per in dataPermissionList" :key="per.id" :checked="per.flag" :value="per.id">
              {{per.name}}<span style="margin-left:80px;">{{per.memo}}</span>
            </a-radio>
          </a-radio-group>
        </a-row>
      </a-tab-pane>
      <a-tab-pane v-if="isMember" key="3" tab="成员列表">
        <div style="text-align:right;margin-bottom:15px;">
          <a-popconfirm title="确定要删除选中的角色吗?" ok-text="确定" cancel-text="取消" @confirm="onConfirmDelete">
            <a-button @click="onBatchRemove" :disabled="selectedRowKeys.length <= 0">批量删除</a-button>
          </a-popconfirm>
        </div>
        <a-table class="employees-table" :columns="columns" :data-source="dataSource" :row-selection="rowSelection" rowKey="id" :pagination="{
                        current: page,
                        pageSize: pageSize,
                        total: total,
                        showLessItems: true,
                        onChange: onPageChange,
                        onShowSizeChange: onSizeChange,
                    }">
          <div slot="operation" slot-scope="text, record">
            <a-popconfirm title="确定要删除该角色吗?" ok-text="确定" cancel-text="取消" @confirm="onConfirmDelete">
              <a class="ant-dropdown-link" @click="onDeleteMember(record)">删除</a>
            </a-popconfirm>
          </div>
        </a-table>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import { permissionTree, getPermissionDataList, getOnPermission } from '@/services/role';
export default {
  name: 'Detail',
  props: {
    isMember: {
      type: Boolean,
      default: true,
    },
    columns: Array,
    dataSource: Array,
    defaultChecked: Array,
    disabledChecked: Array,
    isSave: {
      type: Boolean,
      default: false
    },
    type: String,
    keyId: Number,
    page: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    total: {
      type: Number,
      default: 0,
    },
  },
  data () {
    return {
      activeKey: '1',
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px',
      },
      permissionsValue: 1,
      selectedRowKeys: [],
      deleteIndex: null,
      nowMemberId: null,
      checkedKeys: [],
      menu: [],
      dataPermissionList: [{
        id: 0,
        name: "个人权限",
        flag: false,
        memo: "负责或参与项目对应的数据"
      }]
    };
  },
  watch: {
    defaultChecked: {
      handler (val) {
        if (val.length) {
          this.checkedKeys = this.checkedKeys.concat(this.defaultChecked);
        }
      },
    }
  },
  computed: {
    rowSelection () {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: selectedRowKeys => {
          this.selectedRowKeys = selectedRowKeys;
        },
      };
    },
  },
  created () {
    this.getPermission();
  },
  methods: {
    search (arr, value) {
      for (let i in arr) {
        if (arr[i].id == value) {
          arr[i].disabled = true;
        } else {
          if (arr[i].children) {
            this.search(arr[i].children, value);
          } else {
            return;
          }
        }
      }
      return arr;
    },
    getPermission () {
      permissionTree().then(res => {
        if (res.data.code == 200) {
          this.menu = res.data.data;
          if (this.disabledChecked && this.disabledChecked.length) {
            this.disabledChecked.forEach(value => {
              this.menu = this.search(this.menu, value)
            })
          }
        }
      });
    },
    getCheckedKeys (checkedKeys) {
      this.checkedKeys = checkedKeys.checked.concat(checkedKeys.halfChecked);
    },
    onDeleteMember (members) {
      this.nowMemberId = members.id;
      this.deleteIndex = 1;
    },
    getPermissionsValue (e) {
      const type = this.type == 'role' ? 0 : 1;
      let params = { keyId: this.keyId, type, dataPerId: e.target.value };
      this.getOnPermission(params)
    },
    onBatchRemove () {
      this.deleteIndex = 0;
    },
    onConfirmDelete () {
      this.deleteIndex == 1 ? this.$emit('confirmDelete', this.nowMemberId) : this.$emit('confirmDelete', this.selectedRowKeys);
      this.selectedRowKeys = [];
    },
    onSave () {
      if (this.type == 'role') {
        this.$emit('role-permission', this.checkedKeys);
      } else {
        this.$emit('staff-permission', this.checkedKeys);
      }
    },
    /**
     * @description: 分页
     * @param {*} page
     * @param {*} pageSize
     * @return {*}
     */
    onPageChange (page, pageSize) {
      this.$emit('pageChange', { page, pageSize });
    },
    onSizeChange (current, size) {
      this.$emit('sizeChange', { current, pageSize: size });
    },
    onTabChange (val) {
      this.dataPermissionList = [{
        id: 0,
        name: "个人权限",
        flag: false,
        memo: "负责或参与项目对应的数据"
      }]
      const type = this.type == 'role' ? 0 : 1;
      let params = { keyId: this.keyId, type }
      if (Number(val) === 2) {
        this.getPermissionDataList(params);
      }
    },
    /**
     * @description: 获取数据权限列表
     * @param {*}
     * @return {*}
     */
    getPermissionDataList (params) {
      getPermissionDataList(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          if (data && data.length) {
            const bool = data.every(per => per.flag === false)
            if (bool) {
              this.dataPermissionList[0].flag = true
              this.permissionsValue = this.dataPermissionList[0].id
            }
            this.dataPermissionList = this.dataPermissionList.concat(data)
          }
        } else {
          this.$message.error(msg)
        }
      })
    },
    /**
     * @description: 设置数据权限
     * @param {*}
     * @return {*}
     */
    getOnPermission (params) {
      getOnPermission(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.$message.success(msg)
        } else {
          this.$message.error(msg)
        }
      })
    }
  },
};
</script>

<style scoped lang="less">
.ant-table-striped :deep(.table-striped) {
  background-color: #000 !important;
}
.ant-page-header-heading .ant-avatar {
  width: 80px;
  height: 80px;
}
</style>
